<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>全网</title>
	<link rel="stylesheet" href="css/normalize.css" />
	<link rel="stylesheet" href="css/common.css" />
	<link rel="stylesheet" href="css/index.css" />
</head>

<body class="theme">
	<div id="app" v-cloak>
		<!-- 导航信息 -->
		<header class="header header-skin skin inner-align header-border clearfix">
			<h1 class="header-logo fl">
				<a href="javascript:;"></a>
			</h1>
			<ul class="nav-list fl">
				<li class="nav-item fl  nav--active">
					<a href="javascript:;">全网监控</a>
				</li>
				<li class="nav-item  fl">
					<a href="javascript:;" @click="isOpen=!isOpen">主操辅助</a>
					<ul class="link-list posSub border" v-if="isOpen">
						<li v-for="item in linkList" class="border">
							<a :href="item.link" @click="isOpen=true">{{item.title}}</a>
						</li>
					</ul>
				</li>
				<li class="nav-item fl">
					<a href="javascript:;" @click="museOpen=!museOpen">优化分析</a>
					<ul class="link-list posSub border" v-if="museOpen">
						<li v-for="item in analysisList" class="border">
							<a :href="item.link" @click="museOpen=false">{{item.title}}</a>
						</li>
					</ul>
				</li>
			</ul>
			<div class="right-bar fr">
				<div class="right-bar-time inner-align fl">{{timeStamp |formatterTime}}</div>
				<div class="right-bar-help inner-align fl">{{username}}</div>
				<div class="right-bar-role inner-align fl">
					<form action="/login" method="post">
						<input type="submit" value="">
					</form>
				</div>
			</div>
		</header>
		<!-- 主内容区 -->
		<section class="main outter-top clearfix auto">
			<!-- 左侧内容 -->
			<div class="left-side fl skin outter-right" id="left_side">
				<!-- 产用交互组件 -->
				<production-component></production-component>
				<!-- 主管压力放散组件 -->
				<pressure-component></pressure-component>
				<div class="details">
					<div class="details-title clearfix"><p class="fl">放散详情</p><p class="fr">放散量<span>m3^h</span></p></div>
					<ul v-show="!showBok">
						<li><p class="fl p1"></p><p class="fl p2 red">放散开度</p><p class="fl p3">放散压力</p></li>
						<li><p class="fl p1">1#TRT</p><p class="fl p2 red"></p><p class="fl p3"></p></li>
						<li><p class="fl p1">2#TRT</p><p class="fl p2 red"></p><p class="fl p3"></p></li>
						<li class="clearfix">
								<p class="fl p1">3#TRT</p>
								<div class="fl cont-p">
									<p class="p4 fl red"></p>
									<p class="p4 fl red"></p>
									<p class="p4 fl red"></p>
								</div>
								<p class="fl p3"></p>
							</li>
						<li class="clearfix">
							<p class="fl p1">4#TRT</p>
							<div class="fl cont-p">
								<p class="p4 fl red"></p>
								<p class="p4 fl red"></p>
								<p class="p4 fl red"></p>
							</div>
							<p class="fl p3"></p>
						</li>
					</ul>

				</div>
				<div class="gas" >
					<div class="gas-title outter-top  outter-bottom   clearfix">
						<h2 class="common-title fl">
							<p class="fl">全网波动归因</p>
							<p class="fr" @click="BOK">^</p>
						</h2>
						<ul class="gas-legend fl">
						</ul>
					</div>
					<div class="gas-content  skin2 border" id="gas_chart" v-show="showBok">

					</div>
				</div>
			</div>
			<!-- 右侧内容 -->
			<div class="main-contain skin fl">
				<!-- 各种炉子 -->
				<ul class="main-list skin2  highlight-border clearfix">
					<li class="main-item main-item-border fl" :class="[{'backgroundR':index==0&&gaoluStatus},{'backgroundR':index==1&&refengluStatus},{'backgroundR':index==2&&zhagangStatus},{'backgroundR':index==3&&otherStatus},{'backgroundR':index==4&&guoluStatus},{'backgroundY':index==0&&gaoluStatusY},{'backgroundY':index==1&&refengluStatusY},{'backgroundY':index==2&&zhagangStatusY},{'backgroundY':index==3&&otherStatusY},{'backgroundY':index==4&&guoluStatusY}]"
					 v-for="(item,key,index) in PressureData">
						<div class="main-item-data main-item-data-border  main-item-normal  main-item-gaolu">
							<div class=" main-item-status-normal" :class="[index==0?'main-item-status-l':'',index==4?'main-item-status-r':'',index==1||index==2||index==3?'main-item-status-m':'']">
								<p class="main-item-data-val" v-show="index==0">3#TRT压力: {{item.yali|keepTwo}}kPa</p>
								<p class="main-item-data-val" v-show="index==1">4#热风炉压力: {{item.yali|keepTwo}}kPa</p>
								<p class="main-item-data-val" v-show="index==2">3#轧钢压力: {{item.yali|keepTwo}}kPa</p>
								<p class="main-item-data-val" v-show="index==3">2#球团压力: {{item.yali|keepTwo}}kPa</p>
								<p class="main-item-data-val" v-show="index==4">3#锅炉压力: {{item.yali|keepTwo}}kPa</p>
								<p class="" :class="[index==0?'main-item-data-status':'main-item-data-status-in']"></p>
								<span class="main-item-status-line"></span>
							</div>
							<h3 class="main-item-data-title  outter-left">{{item.name}}</h3>
							<div class="main-item-data-content outter-align clearfix">
								<p class="fl main-item-data-current" v-if="index==0">
									<span class="current-data">{{item.current|formatterVal|keepOne}}</span>
								</p>
								<p class="fl main-item-data-current" v-if="index==1||index==2||index==3||index==4">
									<span class="current-data">{{item.current|formatterVal|keepOne}}</span>
								</p>
								<p class="fr unit">
									<span>万m³/h</span>
								</p>
						   </div>
						   <div v-if="key=='gaolu'">
								<div class="clearfix dataform">
									<p class="fl">预测</p>
									<p class="fr"><span class="fr">万</span><span class="numcolor fr">{{item.prediction|formatterVal|keepOne|orNaN}}</span></p>
								</div>
								<div class="dataform"></div>
								<div class="dataform"></div>
							</div>
							<div v-if="key=='refenglu'">
								<div class="clearfix dataform">
									<p class="fl">1#2#</p>
									<p class="fr"><span class="fr">万</span><span class="numcolor fr">{{item.refenglu12|formatterVal|keepOne}}</span></p>
								</div>
								<div class="clearfix dataform">
									<p class="fl">3#4#5#</p>
									<p class="fr"><span class="fr">万</span><span class="numcolor fr">{{item.refenglu345|formatterVal|keepOne}}</span></p>
								</div>
								<div class="dataform"></div>
							</div>
							<div v-if="key=='zhagang'">
								<div class="dataform"></div>
								<div class="dataform"></div>
								<div class="dataform"></div>
							</div>
							<div v-if="key=='other'">
								<div class="clearfix dataform">
									<p class="fl">烧结</p>
									<p class="fr"><span class="fr">万</span><span class="numcolor fr">{{item.shaojie|formatterVal|keepOne}}</span></p>
								</div>
								<div class="clearfix dataform">
									<p class="fl">球团</p>
									<p class="fr"><span class="fr">万</span><span class="numcolor fr">{{item.qiutuan|formatterVal|keepOne}}</span> </p>
								</div>
								<div class="clearfix dataform">
									<p class="fl">石灰窑</p>
									<p class="fr"><span class="fr">万</span><span class="numcolor fr">{{item.shihuiyao|formatterVal|keepOne}}</span></p>
								</div>
							</div>
							<div v-if="key=='guolu'">
								<div class="clearfix dataform">
									<p class="fl">1#2#</p>
									<p class="fr"><span class="fr">万</span><span class="numcolor fr">{{item.guolu12|formatterVal|keepOne}}</span></p>
								</div>
								<div class="clearfix dataform">
									<p class="fl">3#</p>
									<p class="fr"><span class="fr">万</span><span class="numcolor fr">{{item.guolu3|formatterVal|keepOne}}</span></p>
								</div>
								<div class="clearfix dataform">
									<p class="fl">4#5#</p>
									<p class="fr"><span class="fr">万</span><span class="numcolor fr">{{item.guolu45|formatterVal|keepOne}}</span></p>
								</div>
							</div>	
						</div>
						<div class="main-item-chart" :id="statusChartId[index]"></div>
					</li>
				</ul>
				<!-- 消息中心 -->
				<div id="main_content">
					<message-center :msg="msgCenter" :srcdata="srcline"></message-center>
				</div>
			</div>
		</section>
	</div>
</body>
<script src="js/lib/jquery-1.11.0.min.js"></script>
<script src="js/lib/echarts.min.js"></script>
<script src="js/lib/vue.min.js"></script>
<script src="js/lib/elementUi.js"></script>
<script src="js/lib/vue-resource.js"></script>
<script src="js/data.js"></script>
<script src="js/base.js"></script>
<script src="js/common.js"></script>
<script src="js/chart.js"></script>
<script src="js/components.js"></script>
<script src="js/index.js"></script>
<script>
	//window.location.href='html/gaolu.html';
</script>

</html>